<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>找论坛</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/bbs.css">
</head>
<body>
    <header class="clearfix">
        <div class="container clearfix">
            <div class="logo fl">
                <a href="#"><img src="../images/logo.png" alt=""></a>
            </div>
            <div class="nav-select fl">
                <div class="select-input ">找论坛</div>
                <span class="line hide"></span>
                <ul class="hide">
                    <li ><a href="index.html">首页</a></li>
                    <li ><a href="college.html">网院</a></li>
                    <li ><a href="find-course.html">找课程</a></li>
                    <li><a href="inquiry.html">专家问诊</a></li>
                    <li><a href="free-course.html">免费课程</a></li>
                    <li><a href="goods-list.html">师生商城</a></li>
                    <li class="active"><a href="bbs.html">找论坛</a></li>
                    <li ><a href="find-teacher.html">找老师</a></li>
                </ul>
            </div>
            <div class="fr">
                <div class="search fl">
                    <div class="dropdown fl">
                        <select name="" id="">
                            <option value="">课程</option>
                            <option value="">老师</option>
                        </select>
                    </div>
                    <div class="search-box fl">
                        <input type="text">
                        <i class="iconfont">&#xe641;</i>
                    </div>
                </div>
                <div class="fl header-nav">
                    <ul>
                        <li><a href="#">个人中心</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">我的课表</a></li>
                        <li><a href="#">我的收藏</a></li>
                        <li><a href="#"><i class="iconfont">&#xe62e;</i></a></li>
                        <li><a href="#">退出</a></li>
                    </ul>
                </div>
            </div>
        </div> 
    </header>
    <div class="banner">
        <img src="../images/img7.jpg" alt="" />
    </div>
    <div class="main clearfix no-shadow">
        <div class="container clearfix">
            <!-- 选择科目 -->
            <div class="subject-tab mart30 clearfix">
                <a href="##" class="last icon-right iconfont fl"></a>
                <a href="##" class="next iconfont icon-icon fl"></a>
                <div class="subject-list-outer">
                <ul class="fl subject-ul">
                    <li class="active">语文</li>
                    <li>数学</li>
                    <li>英语</li>
                    <li>物理</li>
                    <li>化学</li>
                    <li>化学</li>
                    <li>吐槽区</li>
                </ul>
                </div>
                 
            </div>
            <!-- 论坛内容 -->
            <div class="bbs-content">
                <div class="bbs-title colorful-line">
                    <p>学习天地</p>
                    <ul class="colorful clearfix">
                        <li></li>
                        <li class="red"></li>
                        <li class="green"></li>
                    </ul>
                </div>
                <div class="bbs-list">
                    <div class="bbs-list-title">
                        <i class="iconfont icon-jian"></i>
                        <span>我也推荐一首诗</span>
                        <span>李正清</span>
                        <span>发表于2018-06-25 10:00</span>
                    </div>
                    <div class="bbs-list-outer">
                        <div class="bbs-list-content clearfix">
                        <div class="fl img-box">
                            <img src="../images/img8.png"  />
                        </div>
                        <div class="fl bbs-text">
                            <p>《江上秋月》年代: 唐  作者: 杨凌<br />
                              陇雁送乡心，羁情属岁阴。惊秋黄叶遍，愁暮碧云深。<br />
                             月色吴江上，风声楚木林。交亲几重别，归梦并愁侵。
                            </p>
                        </div>
                    </div>
                    <div class="bbs-list-content clearfix">
                        <div class="bbs-list-title">
                            <span>回复于2018-11-12  11：11</span>
                        </div>
                        <div class="fl img-box">
                            <img src="../images/img8.png"  />
                        </div>
                        <div class="fl bbs-text">
                            <p>《江上秋月》年代: 唐  作者: 杨凌<br />
                              陇雁送乡心，羁情属岁阴。惊秋黄叶遍，愁暮碧云深。<br />
                             月色吴江上，风声楚木林。交亲几重别，归梦并愁侵。
                            </p>
                        </div>
                    </div>
                    <div class="bbs-textarea mart30 clearfix">
                        <div class="fl text-container">
                            <textarea placeholder="请输入回复信息"></textarea>
                            <span>0/500</span>
                        </div>
                        <a href="##" class="fl answer-btn">快捷回复</a>
                    </div>
                    </div>
                    
                </div>
                <div class="bbs-list">
                    <div class="bbs-list-title">
                        <i class="iconfont icon-jian"></i>
                        <span>我也推荐一首诗</span>
                        <span>李正清</span>
                        <span>发表于2018-06-25 10:00</span>
                    </div>
                    <div class="bbs-list-outer">
                        <div class="bbs-list-content clearfix">
                            <div class="fl img-box">
                                <img src="../images/img8.png"  />
                            </div>
                            <div class="fl bbs-text">
                                <p>《江上秋月》年代: 唐  作者: 杨凌<br />
                                  陇雁送乡心，羁情属岁阴。惊秋黄叶遍，愁暮碧云深。<br />
                                 月色吴江上，风声楚木林。交亲几重别，归梦并愁侵。
                                </p>
                            </div>
                        </div>
                        <div class="bbs-list-content clearfix">
                            <div class="bbs-list-title">
                                <span>回复于2018-11-12  11：11</span>
                            </div>
                            <div class="fl img-box">
                                <img src="../images/img8.png"  />
                            </div>
                            <div class="fl bbs-text">
                                <p>《江上秋月》年代: 唐  作者: 杨凌<br />
                                  陇雁送乡心，羁情属岁阴。惊秋黄叶遍，愁暮碧云深。<br />
                                 月色吴江上，风声楚木林。交亲几重别，归梦并愁侵。
                                </p>
                            </div>
                        </div>
                        <div class="bbs-textarea mart30 clearfix">
                            <div class="fl text-container">
                                <textarea placeholder="请输入回复信息"></textarea>
                                <span>0/500</span>
                            </div>
                            <a href="##" class="fl answer-btn">快捷回复</a>
                        </div>
                    </div>
                </div>
                <div class="bbs-list">
                    <div class="bbs-list-title">
                        <i class="iconfont icon-jia show"></i>
                        <span>我也推荐一首诗</span>
                        <span>李正清</span>
                        <span>发表于2018-06-25 10:00</span>
                    </div>
                    <div class="bbs-list-outer" style="display:none;">
                        <div class="bbs-list-content clearfix">
                        <div class="fl img-box">
                            <img src="../images/img8.png"  />
                        </div>
                        <div class="fl bbs-text">
                            <p>《江上秋月》年代: 唐  作者: 杨凌<br />
                              陇雁送乡心，羁情属岁阴。惊秋黄叶遍，愁暮碧云深。<br />
                             月色吴江上，风声楚木林。交亲几重别，归梦并愁侵。
                            </p>
                        </div>
                        </div>
                        <div class="bbs-list-content clearfix">
                            <div class="bbs-list-title">
                                <span>回复于2018-11-12  11：11</span>
                            </div>
                            <div class="fl img-box">
                                <img src="../images/img8.png"  />
                            </div>
                            <div class="fl bbs-text">
                                <p>《江上秋月》年代: 唐  作者: 杨凌<br />
                                  陇雁送乡心，羁情属岁阴。惊秋黄叶遍，愁暮碧云深。<br />
                                 月色吴江上，风声楚木林。交亲几重别，归梦并愁侵。
                                </p>
                            </div>
                        </div>
                        <div class="bbs-textarea mart30 clearfix">
                            <div class="fl text-container">
                                <textarea placeholder="请输入回复信息"></textarea>
                                <span>0/500</span>
                            </div>
                            <a href="##" class="fl answer-btn">快捷回复</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="page mart30">
                <ul>
                    <li class="prev"><i class="iconfont">&#xe60a;</i>PREV</li>
                    <li>1</li>
                    <li>2</li>
                    <li class="active">3</li>
                    <li class="next">NEXT<i class="iconfont">&#xe60b;</i></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="introduce">
        <div class="container">
            <div class="top clearfix">
                <div class="logo fl"><a href="#"><img src="../images/logo.png" alt=""></a></div>
                <div class="fl download">
                    <img src="../images/erweima.png" alt="">
                    <p>客户端下载</p>
                </div>
                <div class="fl download">
                    <img src="../images/erweima.png" alt="">
                    <p>微信公众号</p>
                </div>
                <div class="fl contact">
                    <p><i class="iconfont">&#xe618;</i>020-32146993</p>
                    <p><i class="iconfont">&#xe61b;</i>4903 Deangel Row Suite 838</p>
                    <p><i class="iconfont">&#xe639;</i>support@company.com</p>
                </div>
            </div>
            <div class="contact-ul clearfix">
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">人才招聘</a></li>
                    <li><a href="#">服务协议</a></li>
                </ul>
            </div>
            <div class="footline">
                <img src="../images/footer_end.png" alt="">
            </div>
        </div>
    </div>
    <footer>
        <p>广州市家合教育科技有限公司</p>
        <p>地址：广州市增城大道69号万达广场金街9栋201-204 粤ICP备16098091号</p>
    </footer>
</body>
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/conn.js"></script>
<script type="text/javascript">
    //tab切换
    $('.coll-tab,.select-type').on('click','li',function(){
        var $this = $(this);
        $this.addClass('active').siblings().removeClass('active');
    });
    //限制字数
    /**
     * textarea 限制输入字数
     * @param  string str 类名或ID
     * @param  number num 限制输入的字数
     */
    function limitImport(str,num){
        $(document).on('input propertychange',str,function(){
            var self = $(this);
            var content = self.val();
            if (content.length > num){
                self.val(content.substring(0,num));
            } 
            self.siblings('span').text(self.val().length+'/'+num);
        });
    }
    //用法示例
    limitImport('textarea',500);
    //点击展开收起
    $('.bbs-list').on('click','.iconfont',function(){
        var $this = $(this);
        $this.parents('.bbs-list').find('.bbs-list-outer').toggle();
        if($this.hasClass('show')){
            $this.removeClass('icon-jia').addClass('icon-jian').removeClass('show');
        }
        else{
            $this.removeClass('icon-jian').addClass('icon-jia').addClass('show');
        }
    });
    // 学科点击事件
    var liIndex = 0;
    var liLength = $('.subject-tab').find('li').length;
     var ulWidth = liLength *170
     $('.subject-ul').css("width",""+ulWidth+"px")
   
    $('.subject-tab').on('click','li',function(){
        $(this).addClass('active').siblings().removeClass('active');
        var index = $(this).index();
        liIndex = index;
    });
    // 学科点击向右
    $('.subject-tab').on('click','.next',function(){
        liIndex++;
        if(liIndex>liLength-1){
            liIndex = 0;
        }

        $('.subject-tab').find('li').eq(liIndex).addClass('active').siblings().removeClass('active')
        $('.subject-tab ul').stop().animate({ left: -145*liIndex }, 500)
    });
    // 学科点击向左
    $('.subject-tab').on('click','.last',function(){
        liIndex--;
        if(liIndex<0){
            liIndex = liLength-1;
        }
    
        $('.subject-tab').find('li').eq(liIndex).addClass('active').siblings().removeClass('active')
        $('.subject-tab ul').stop().animate({ left: (-145*liIndex)+145}, 500)
    });
</script>